import { Button, Form, Input, Space, DatePicker, Select } from 'antd'
import React from 'react'
import { SearchOutlined } from '@ant-design/icons'
import _ from 'lodash'


class SearchHeader extends React.Component {
  state = {
    options: [],
  }
  async componentDidMount() {
    
  }
  onFinish = (values) => {
    _.forIn(values, (v, k) => {
      if (!v) {
        delete values[k]
      }
    })
    this.props.getValue(values)
  }
  reset = () => {
    this.formRef.setFieldsValue({
      goodsName: '',
      materialId: ''
    })
    this.props.getValue({})
  }
  render() {
    return (
      <div className="search-header search-header-list">
        <Form
          layout={'inline'}
          ref={(ref) => (this.formRef = ref)}
          onFinish={this.onFinish}>
          
          {/* <Form.Item name={'nickName'}>
            <Input
              style={{ width: 140 }}
              suffix={<SearchOutlined />}
              placeholder={'用户昵称'}
            />
          </Form.Item> */}
          {/* <Form.Item name={'memberMobile'}>
            <Input
              style={{ width: 140 }}
              suffix={<SearchOutlined />}
              placeholder={'手机号'}
            />
          </Form.Item> */}
          <Form.Item name={'goodsName'}>
            <Input
              style={{ width: 140 }}
              suffix={<SearchOutlined />}
              placeholder={'商品名称'}
            />
          </Form.Item>
          <Form.Item name={'materialId'}>
            <Input
              style={{ width: 140 }}
              suffix={<SearchOutlined />}
              placeholder={'物料ID'}
            />
          </Form.Item>
          <Form.Item>
            <Space size="small" style={{ marginLeft: 10 }}>
              <Button type="primary" htmlType="submit">
                查询
              </Button>
              <Button onClick={this.reset}>重置</Button>
              
            </Space>
          </Form.Item>
        </Form>
      </div>
    )
  }
}

export default SearchHeader
